import React, { useEffect } from "react";
import { Popconfirm, Button, Dropdown, Menu, message } from "antd";
import { EllipsisOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
export default function ArticleHeader({
  handlerPublicBtn,
  handlerDraftsBtn,
  isExecuteHandlerDelClick,
  headerValue,
  handlerDataInfo,
  openSettingVisible,
  isDisableDelBtn,
  isDisableCheckBtn,
  messageFn,
}) {
  const history = useHistory();
  useEffect(() => {}, []);
  const handlerConfirm = () => {
    history.goBack();
  };
  const menu = () => {
    return (
      <Menu>
        <Menu.Item key="1" disabled={isDisableCheckBtn}>
          查看
        </Menu.Item>
        <Menu.Item key="2" onClick={headerValue ? openSettingVisible : messageFn}>
          设置
        </Menu.Item>
        <Menu.Item key="3" onClick={headerValue ? handlerDraftsBtn : messageFn}>
          保存草稿
        </Menu.Item>
        <Menu.Item disabled={isDisableDelBtn} key="4" onClick={isExecuteHandlerDelClick}>
          删除
        </Menu.Item>
      </Menu>
    );
  };
  return (
    <div className="article-header">
      <div className="article-header-lf">
        <Popconfirm title="确认关闭？如果有内容变更，请先保存。" okText="确认" cancelText="取消" onConfirm={handlerConfirm}>
          <span className="icon-span">
            <i className="iconfont icon-chahao"></i>
          </span>
        </Popconfirm>
        <input type="text" value={headerValue} onChange={(e) => handlerDataInfo(e.target.value, "title")} />
      </div>
      <div className="article-header-rt">
        <Button type="primary" className="public-btn" onClick={headerValue ? handlerPublicBtn : messageFn}>
          发布
        </Button>
        <Dropdown trigger="hover" overlay={menu} placement="bottomLeft">
          <div className="more_handler">
            <EllipsisOutlined />
          </div>
        </Dropdown>
      </div>
    </div>
  );
}
